90:I[903690,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3ite267mjat-0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/16d-sm-uvlj85.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/41fykybko3c-s.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3szdt-heown_b.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xjlw3nohwgaz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/09cqs19p81kqd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1zmjnc028c2fv.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/25n_i-5l5l5ey.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1-okd7udhalq3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vn53p8-7ln-n.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0_o46o_pl393e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0bgbfks22job0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3ite267mjat-0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/16d-sm-uvlj85.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/41fykybko3c-s.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3szdt-heown_b.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xjlw3nohwgaz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/09cqs19p81kqd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1zmjnc028c2fv.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/25n_i-5l5l5ey.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1-okd7udhalq3.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vn53p8-7ln-n.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0_o46o_pl393e.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj","/chat-static/_next/static/chunks/0bgbfks22job0.js?dpl=dpl_8sA98tgF1zXc9smifPewGH2AVyxj"],"SWRDataProvider"] 92:T3c66,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import UserProfileCard from "@/components/user-profile-card" export default function Home() { return (

{/* Dark overlay */}

{/* Main content */}

{/* Footer */}

Designed and Developed with ❤️ by{" "} Dollar Gill

) } [V0_FILE]png:file="public/abstract-gradient-dark-blue-purple.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-gradient-dark-blue-purple-Hth2aOMFg323MJ0FR232mgoA3xNIKo.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-portrait-aRtFhI6toDZYfQKtZxHYSmAPGsdCBC.png" isMerged="true" [V0_FILE]png:file="public/abstract-design-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-design-pattern-mPeHvObFXrKYMCgsSQanjSepGQjtU8.png" isMerged="true" [V0_FILE]typescriptreact:file="components/user-profile-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { MapPin, Calendar, Mail, Globe, Users, Heart, MessageCircle, Settings, Edit3, Youtube, X, Check, } from "lucide-react" interface UserProfile { name: string username: string bio: string location: string joinDate: string email: string phone: string website: string followers: number following: number posts: number likes: number avatar: string coverImage: string skills: string[] isFollowing: boolean } const mockUser: UserProfile = { name: "Diecast by Dollar", username: "@DiecastByDollar", bio: "Hey I'm Dollar Gill! 🚗 I collect Hot Wheels, Jada, Matchbox, Maisto, Pink Slips and other diecast cars. Passionate about miniature automotive art! 🏎️✨", location: "Sydney, Australia", joinDate: "August 2025", email: "hi@diecastbydollar.com", phone: "+1 (555) 123-4567", website: "www.DiecastByDollar.com", followers: 2847, following: 892, posts: 156, likes: 12400, avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/21616217_90.jpg-YQw7j36MOYnX34E2mXOCDDXrwsk2Wz.jpeg", coverImage: "/abstract-design-pattern.png", skills: ["Hot Wheels", "Maisto", "Matchbox", "Jada", "Pink Slips"], isFollowing: false, } export default function UserProfileCard() { const [user, setUser] = useState(mockUser) const [isLoading, setIsLoading] = useState(false) const [isEditing, setIsEditing] = useState(false) const [isLiked, setIsLiked] = useState(false) const [editForm, setEditForm] = useState(mockUser) const handleFollow = async () => { setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1000)) setUser((prev) => ({ ...prev, isFollowing: !prev.isFollowing })) setIsLoading(false) } const handleLike = () => { setIsLiked(!isLiked) } const handleEdit = () => { setIsEditing(true) setEditForm(user) } const handleSave = () => { setUser(editForm) setIsEditing(false) } const handleCancel = () => { setEditForm(user) setIsEditing(false) } const formatNumber = (num: number) => { if (num >= 1000) { return (num / 1000).toFixed(1) + "k" } return num.toString() } return (

{/* Profile Content */}

{/* Avatar and Basic Info */}

{/* Avatar */}

{/* Name, Username, and YouTube Button */}

{isEditing ? (

setEditForm({ ...editForm, name: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-lg font-semibold" placeholder="Name" /> setEditForm({ ...editForm, username: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm" placeholder="Username" />

) : ( <>

{user.name}

{user.username}

)}

{/* Settings Button */}

{isEditing ? (

) : ( )}

{/* Bio */} {isEditing ? (

setEditForm({ ...editForm, bio: e.target.value })}
            className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm leading-relaxed resize-none"
            placeholder="Bio"
            rows={3}
          />
        ) : (
          <p className="text-white/85 text-sm leading-relaxed">{user.bio}</p>
        )}

{/* Skills */}
        <div className="flex flex-wrap gap-1.5">
          {isEditing ? (
            <div className="w-full">
              <Input
                value={editForm.skills.join(", ")}
                onChange={(e) =>
                  setEditForm({ ...editForm, skills: e.target.value.split(", ").filter((s) => s.trim()) })
                }
                className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm"
                placeholder="Skills (comma separated)"
              />
            </div>
          ) : (
            user.skills.map((skill, index) => (
              <Badge
                key={index}
                className="bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/30 text-blue-100 text-xs px-2.5 py-1 transition-all duration-300 font-medium"
              >
                {skill}
              </Badge>
            ))
          )}
        </div>

{/* Stats */}
        <div className="grid grid-cols-4 gap-3 py-2">
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.posts)}</p>
            <p className="text-white/60 text-xs font-medium">Posts</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.followers)}</p>
            <p className="text-white/60 text-xs font-medium">Followers</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.following)}</p>
            <p className="text-white/60 text-xs font-medium">Following</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.likes)}</p>
            <p className="text-white/60 text-xs font-medium">Likes</p>
          </div>
        </div>

{/* Contact Info */}
        <div className="space-y-2.5 bg-white/5 rounded-xl p-4 border border-white/10">
          {isEditing ? (
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.location}
                  onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Location"
                />
              </div>
              <div className="flex items-center gap-3">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.joinDate}
                  onChange={(e) => setEditForm({ ...editForm, joinDate: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Join Date"
                />
              </div>
              <div className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.email}
                  onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Email"
                />
              </div>
              <div className="flex items-center gap-3">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.website}
                  onChange={(e) => setEditForm({ ...editForm, website: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Website"
                />
              </div>
            </div>
          ) : (
            <>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.location}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">Joined {user.joinDate}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.email}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.website}</span>
              </div>
            </>
          )}
        </div>

{/* Action Buttons */}
        <div className="flex gap-2.5 pt-1">
          <Button
            onClick={handleFollow}
            disabled={isLoading}
            className="flex-1 bg-blue-500 hover:bg-blue-600 border-0 text-white font-medium transition-all duration-300 hover:scale-[1.02] shadow-lg hover:shadow-xl"
          >
            {isLoading ? <Users className="h-4 w-4 animate-spin mr-2" /> : <Users className="h-4 w-4 mr-2" />}
            {user.isFollowing ? "Following" : "Follow"}
          </Button>

<Button
            onClick={handleLike}
            className={`bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/30 text-white transition-all duration-300 hover:scale-[1.02] shadow-md ${isLiked ? "bg-red-500/20 border-red-400/30" : ""}`}
          >
            <Heart className={`h-4 w-4 transition-colors duration-300 ${isLiked ? "fill-red-400 text-red-400" : ""}`} />
          </Button>
        </div>
      </div>
    </div>
  )
}86:["$","$L90",null,{"chatId":"uF5NUOGpMGF","children":["$","$L91",null,{"data":{"@\"active-block\",\"uF5NUOGpMGF\",":{"id":"b_QJcoFuK0rMm","messageId":"pM6btdT3Kqbgcuo3GATgeLSXKaOk2DEr","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"user-profile-card","type":"code-project","project":"user-profile-card","taskNameActive":"Adding interactive features","taskNameComplete":"Added interactive features"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uF5NUOGpMGF\",":false,"":null},"children":"$L93"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This